<template>
	<view>
		<u-navbar :border-bottom="false" title="每日签到" back-icon-color="#ffffff" :background="{background:'#2149c3'}" title-color="#ffffff"></u-navbar>
		<view>
			<image class="head_img" src="../../static/qiandao.png"></image>
		</view>
		<view class='count'>
			<view>您已连续签到<text class="monthSum">{{sumCount}}</text>/5天</view>
		</view>
		<model-calendar 
		:sendYear="toYear" :sendMonth="toMonth"
		:dataSource="signData" :totalNum="sumCount"
		 @dateChange="getData" @clickChange="clickSign"	 >
		 </model-calendar>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	// import modelCalendar from '@/graceUI/components/Calendar.vue';
	import modelCalendar from '../components/graceUI/components/Calendar.vue';
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},
		data() {
			return {
				toYear: parseInt(new Date().getFullYear()), 
				toMonth: parseInt(new Date().getMonth() + 1),
				sumCount: 0,
				signData: []
			};
		},
		components: {
			modelCalendar
		},
		created() {
			//获取当前用户当前任务的签到状态  			
			this.getData(this.toYear+"-"+this.toMonth);
		},
		methods: {
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
			clickSign(day) {
				//console.log(day);
				uni.request({
					url: this.serverUrl + 'app/addSign',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: {
						memberId: this.userInfo.id,
						createDay: day,
						sumCount: this.sumCount,
					},
					success: (r) => {
						//console.log(r);
						if (r.data.code==1) {
							uni.showToast({
								title: "签到成功",
								icon: 'success',
								duration: 2000
							});
							this.signData.push(day);
							this.getData(this.toYear+"-"+this.toMonth);
						}else{
							uni.showToast({
								icon: "none",
								title: r.data.msg
							})
						}
					}
				})
			},

			//获取当前用户该任务的签到数组
			getData(val) {
				uni.showLoading();
				uni.request({
					url: this.serverUrl + 'app/getSignList',
					data: {
						memberId: this.userInfo.id,
						pageNum: 1,
						pageSize: 31,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == 0) {
							this.sumCount = r.data.sumCount;
							for (var i = 0; i < r.data.data.length; i++) {
								this.signData.push(r.data.data[i].createDay);
							}
						}
					},
					complete: r => {
						uni.hideLoading();
					}
				});
				
			},
		}
	}
</script>

<style lang='scss'>
	.head_img{
		width: 100%;
		height: 380rpx;
	}
	.count .daynumber {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.count .daynumber .day {
		margin-top: 50rpx;
	}

	.count {
		padding: 10rpx;
		display: flex;
		text-align: center;
		border-radius: 10px;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		align-items: center;
	}

	.count .number {
		color: #fff;
		font-size: 60rpx;
		background-color: #94db98;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 20rpx;
	}

	.monthSum {
		color: red;
		font-size: 40rpx;
	}

	.count text {
		margin: 10rpx;
	}
</style>
